<template>
  <div>
<!-- 
      <van-loading color="#ff5f16">
          玩命加载中......
      </van-loading> -->
      		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3"></div>
		<div class="d4"></div>
		<div class="d5"></div>
		<div class="d6"></div>
		<div class="d7"></div>
		<div class="d8"></div>
		<div class="d9"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
  // div{

  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // }

  *{
				margin: 0;padding: 0;
			}
			div{

				background-color: #000;
				transform: rotate(45deg);
			}
			.d1{
				height: 65px;
				width: 65px;
				animation: dong 2s infinite ease-out 0.5s;
				position: absolute;
				left: 0;right: 0;top: 0;bottom: 0;margin: auto;
				/* display: none; */
			}
			.d2,.d3,.d4,.d5,.d6,.d7,.d8,.d9{
				height: 25px;
				width: 25px;
				position: absolute;
				left: 0;right: 0;top: 0;bottom: 0;margin: auto;
			}
			
			.d2{
				animation: dong2 2s infinite 0.2s;
			}
			.d3{
				animation: dong3 2s infinite 0.3s;
			}
			.d4{
				animation: dong4 2s infinite 0.4s;
			}
			.d5{
				animation: dong5 2s infinite 0.5s;
			}
			.d6{
				animation: dong6 2s infinite 0.6s;
			}
			.d7{
				animation: dong7 2s infinite 0.7s;
			}
			.d8{
				animation: dong8 2s infinite 0.8s;
			}
			.d9{
				animation: dong9 2s infinite 0.9s;
			}
			
			@keyframes dong{
				
				50%{
					
					transform: rotate(45deg) scale(0.3);
				}
				100%{
					transform: rotate(45deg) scale(1);
					/* transform: rotate(45deg) scale(1); */
				}
			}
			@keyframes dong2{
				
				50%{
					/* transform: rotate(45deg); */
					top: -165px;
				}
				100%{
					top: 0;
				}
			}
			
			@keyframes dong3{
				
				50%{
					/* transform: rotate(45deg); */
					top: -85px;
					left: 85px;
				}
				100%{
					top: 0;
					left: 0;
				}
			}
			@keyframes dong4{
				
				50%{
					/* transform: rotate(45deg); */
					
					left: 165px;
				}
				100%{
					left: 0;
				}
			}
			@keyframes dong5{
				
				50%{
					/* transform: rotate(45deg); */
					top: 85px;
					left: 85px;
				}
				100%{
					left: 0;
					top: 0;
				}
			}
			@keyframes dong6{
				
				50%{
					/* transform: rotate(45deg); */
					top: 165px;
					
				}
				100%{
					left: 0;
					top: 0;
				}
			}
			@keyframes dong7{
				
				50%{
					/* transform: rotate(45deg); */
					top: 85px;
					left: -85px;
				}
				100%{
					left: 0;
					top: 0;
				}
			}
			@keyframes dong8{
				
				50%{
					/* transform: rotate(45deg); */
					
					left: -165px;
				}
				100%{
					left: 0;
					top: 0;
				}
			}
			@keyframes dong9{
				
				50%{
					/* transform: rotate(45deg); */
					top: -85px;
					left: -85px;
				}
				100%{
					left: 0;
					top: 0;
				}
			}
</style>